
const imgBox = document.getElementById('imgBox');

let lastMove = {
  time: 0,
  x: 0,
  y: 0
};
let st = null;
function moveLightRing(x, y) {
  // 短时间内的短距离移动，不进行运动
  const newTime = new Date().getTime();
  if (lastMove.time + 10 > newTime
    && lastMove.x + 10 > x
    && lastMove.y + 10 > y
  ) {
    // imgBox.className = 'img-box img-box-big';
    return;
  }
  lastMove.time = newTime;
  lastMove.x = x;
  lastMove.y = y;

  // 移动
  if (imgBox.className.indexOf('img-box-small') === -1) {
    imgBox.className = 'img-box img-box-small';
  }
  imgBox.style.setProperty('--x', x + 'px');
  imgBox.style.setProperty('--y', y + 'px');

  clearTimeout(st);
  st = setTimeout(() => {
    imgBox.className = 'img-box img-box-big';
  }, 100);
}

imgBox.addEventListener('mouseenter', (e) => {
  moveLightRing(e.offsetX, e.offsetY);
});
imgBox.addEventListener('mousemove', (e) => {
  moveLightRing(e.offsetX, e.offsetY);
});
imgBox.addEventListener('mouseout', (e) => {
  moveLightRing(e.offsetX, e.offsetY);
});
